<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <% include ../head.html %>
  <title>demo</title>
  <!--@hot-reload, will auto remove after compiled-->
  <link rel="stylesheet" data-hr="hot-reload" href="/demo/styles/index.css">
</head>
<body>

    <div class="header">MG最佳实践DEMO页面</div>
    <div class="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="banner-img" src="http://cnd.yintage.com/1.jpg" alt="">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="category">
      <div class="item">
        <img src="http://cnd.yintage.com/jichi.jpg" alt="">
      </div>
      <div class="item">
        <img src="http://cnd.yintage.com/jipai.jpg" alt="">
      </div>
      <div class="item">
        <img src="http://cnd.yintage.com/shengdai.jpg" alt="">
      </div>
      <div class="item">
        <img src="http://cnd.yintage.com/jichi.jpg" alt="">
      </div>
      <div class="item">
        <img src="http://cnd.yintage.com/jipai.jpg" alt="">
      </div>
    </div>
    <div class="category">
      <div class="item">
        <img src="http://cnd.yintage.com/shengdai.jpg" alt="">
      </div>
      <div class="item">
        <img src="http://cnd.yintage.com/jipai.jpg" alt="">
      </div>
      <div class="item">
        <img src="http://cnd.yintage.com/shengdai.jpg" alt="">
      </div>
      <div class="item">
        <img src="http://cnd.yintage.com/jichi.jpg" alt="">
      </div>
      <div class="item">
        <img src="http://cnd.yintage.com/jipai.jpg" alt="">
      </div>
    </div>
    <div class="list-section">
      <div class="box">
        <div class="box-image">
          <img src="http://cnd.yintage.com/f1.jpg" alt="">
        </div>
        <div class="box-message">
          <div class="pd-title">进口深海鳕鱼500g（精选）</div>
          <div class="pd-sub-title">“还是个小孩就这么贪吃？”</div>
          <div class="pd-option">
            <span class="pd-price">￥18.8/份</span>
            <span class="pd-card"><i class="mg-icon icon-cart">&#xe603;</i></span>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box-image">
          <img src="http://cnd.yintage.com/m1.jpg" alt="">
        </div>
        <div class="box-message">
          <div class="pd-title">进口深海鳕鱼500g（精选）</div>
          <div class="pd-sub-title">“还是个小孩就这么贪吃？”</div>
          <div class="pd-option">
            <span class="pd-price">￥18.8/份</span>
            <span class="pd-card"><i class="mg-icon icon-cart">&#xe603;</i></span>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box-image">
          <img src="http://cnd.yintage.com/f1.jpg" alt="">
        </div>
        <div class="box-message">
          <div class="pd-title">进口深海鳕鱼500g（精选）</div>
          <div class="pd-sub-title">“还是个小孩就这么贪吃？”</div>
          <div class="pd-option">
            <span class="pd-price">￥18.8/份</span>
            <span class="pd-card"><i class="mg-icon icon-cart">&#xe603;</i></span>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box-image">
          <img src="http://cnd.yintage.com/m1.jpg" alt="">
        </div>
        <div class="box-message">
          <div class="pd-title">进口深海鳕鱼500g（精选）</div>
          <div class="pd-sub-title">“还是个小孩就这么贪吃？”</div>
          <div class="pd-option">
            <span class="pd-price">￥18.8/份</span>
            <span class="pd-card"><i class="mg-icon icon-cart">&#xe603;</i></span>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box-image">
          <img src="http://cnd.yintage.com/f1.jpg" alt="">
        </div>
        <div class="box-message">
          <div class="pd-title">进口深海鳕鱼500g（精选）</div>
          <div class="pd-sub-title">“还是个小孩就这么贪吃？”</div>
          <div class="pd-option">
            <span class="pd-price">￥18.8/份</span>
            <span class="pd-card"><i class="mg-icon icon-cart">&#xe603;</i></span>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box-image">
          <img src="http://cnd.yintage.com/m1.jpg" alt="">
        </div>
        <div class="box-message">
          <div class="pd-title">进口深海鳕鱼500g（精选）</div>
          <div class="pd-sub-title">“还是个小孩就这么贪吃？”</div>
          <div class="pd-option">
            <span class="pd-price">￥18.8/份</span>
            <span class="pd-card"><i class="mg-icon icon-cart">&#xe603;</i></span>
          </div>
        </div>
      </div>
    </div>
  
  <!--@hot-reload, will auto remove after compiled-->
  <script type="text/javascript" data-hr="hot-reload" src="/common/js/hot-reload.js"></script>
</body>
</html>